<template>
	<view v-if="!loading">
		<u-steps inactiveColor="#0B0F12" direction="column">
			<view class="time-line">
				<u-row v-for="i in dayData" :key="i.time">
					<u-icon class="time-icon" size="12" name="clock-fill" color="#999"></u-icon>
					<u-row class="time-content">
						{{i.time}}
						<view class="card-border">
							<view class="card">
								<u-row>
									<u-col :span="5">
										<u-row>
											<u-image width="10px" height="10px"
												src="../../static/images/measuring/head.png"></u-image>
											{{i.head}}
										</u-row>
									</u-col>
									<u-col :span="5"><u-row>
											<u-image width="10px" height="10px"
												src="../../static/images/measuring/heart.png"></u-image>
											{{i.heart}}
											<span>
												{{i.unit}}
											</span>
										</u-row></u-col>
									<u-col :span="2" align="bottom">
										<u-image width="20px" height="20px"
											src="../../static/images/measuring/arrow.png"></u-image>
									</u-col>
								</u-row>
							</view>
						</view>
					</u-row>
				</u-row>
			</view>
		</u-steps>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				dayData: [{
					time: '10:30',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}, {
					time: '11:30',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}, {
					time: '12:30',
					head: '左手',
					heart: '90',
					unit: 'bpm'
				}, {
					time: '13:30',
					head: '左手',
					heart: '87',
					unit: 'bpm'
				}, {
					time: '14:30',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}, {
					time: '15:30',
					head: '左手',
					heart: '97',
					unit: 'bpm'
				}]

			}
		},
		components: {},
		methods: {},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.time-line .u-row:first-child {
		.time-icon {
			background-color: pink;
			padding-top: 24px;
			top: 0;
			background-color: #0B0F12;
		}
	}

	.time-line .u-row:last-child {
		.time-icon {
			background-color: pink;
			padding-bottom: 36px;
			top: auto;
			bottom: 0px;
			background-color: #0B0F12;
		}
	}

	.time-line {
		border-left: 1px dashed #999;
		margin-left: 15px;


		.u-row {
			position: relative;

			.time-icon {
				position: absolute;
				left: -6px;
				top: 22px
			}

			.time-content {
				width: calc(100% - 30px);
				margin-left: 10px;
				font-weight: bold;
				font-size: 16px;
				color: #999999;
				justify-content: space-between !important;
				margin-bottom: 15px;

				.card-border {
					border-radius: 12px;
					overflow: hidden;
					margin-left: 12px;

					.card {
						width: 230px;
						height: 56px;
						box-shadow: inset 0px 0px 12px 6px #2C281F;
						border: 1px solid;
						border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
						display: flex;
						align-items: center;
						padding: 0px 15px;

						.u-row {
							width: 100%;
							font-size: 16px;
							color: #FFD8BB;

							span {
								font-size: 12px;
								color: #999999;
								margin-left: 4px;
							}

							::v-deep .u-image {
								margin-right: 6px;
							}
						}
					}
				}
			}
		}

	}
</style>